<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Index</title>
  <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="style/reset.css" />
  <link rel="stylesheet" type="text/css" href="style/common.css" />
  <link rel="stylesheet" type="text/css" href="style/index.css" />
</head>

<body>
  <div class="box">
    <!-- 头部 -->
    <header class="head">
      <img src="images/index_bg.jpg" alt="">
      <div class="top">
        <div class="topcon">
          <h2>小包子的火锅店</h2>
          <p>欢迎顾客们光临小包子的火锅店，保证让您又不一样的美食体验</p>
          <ul class="ul1">
            <li>
              <a href=""><img src="images/index_icon01.png" alt=""></a>
            </li>
            <li>
              <a href=""><img src="images/index_icon02.png" alt=""></a>
            </li>
            <li>
              <a href=""><img src="images/index_icon03.png" alt=""></a>
            </li>
            <li>
              <a href=""><img src="images/index_icon04.png" alt=""></a>
            </li>
          </ul>
          <p class="txt">折扣：10% </p>
          <p class="txt">其它折扣：满20减10.满30减15</p>
        </div>
      </div>
    </header>
    <!-- 点菜 -->
    <section class="menu">
      <div class="title">点菜</div>
      <div class="contant">
        <!-- 左侧导航栏 -->
        <ul class="ul2">
          <li><a href="">热门</a></li>
          <li><a href="">折扣</a></li>
          <li><a href="">便当</a></li>
          <li><a href="">蔬菜</a></li>
          <li><a href="">肉类</a></li>
          <li><a href=""></a></li>
        </ul>
        <!-- 右侧菜品列表 -->
        <div class="right">
          <ul class="ul3">
            <li>
              <img src="images/index_pic01.png" alt="">
              <div class="text">
                <h3>青菜</h3>
                <p class="describe">说明文字说明文字说明文字说明文字</p>
                <p class="num">月销 &nbsp;&nbsp;200</p>
                <p class="price">300ks&nbsp;&nbsp;<span>&nbsp;&nbsp;5000ks&nbsp;&nbsp;</span></p>
                <div class="addnum">
                  <img src="images/index_icon06.png" alt="">
                  <span>1</span>
                  <img src="images/index_icon07.png" alt="">
                </div>
              </div>
            </li>
            <li>
              <img src="images/index_pic01.png" alt="">
              <div class="text">
                <h3>青菜</h3>
                <p class="describe">说明文字说明文字说明文字说明文字</p>
                <p class="num">月销 &nbsp;&nbsp;200</p>
                <p class="price">300ks&nbsp;&nbsp;<span>&nbsp;&nbsp;5000ks&nbsp;&nbsp;</span></p>
                <div class="addnum">
                  <img src="images/index_icon06.png" alt="">
                  <span>1</span>
                  <img src="images/index_icon07.png" alt="">
                </div>
              </div>
            </li>
            <li>
              <img src="images/index_pic01.png" alt="">
              <div class="text">
                <h3>青菜</h3>
                <p class="describe">说明文字说明文字说明文字说明文字</p>
                <p class="num">月销 &nbsp;&nbsp;200</p>
                <p class="price">300ks&nbsp;&nbsp;<span>&nbsp;&nbsp;5000ks&nbsp;&nbsp;</span></p>
                <div class="addnum">
                  <img src="images/index_icon06.png" alt="">
                  <span>1</span>
                  <img src="images/index_icon07.png" alt="">
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>

    <!-- 底部 -->
    <nav>
      <div class="nav">
      </div>
      <div class="bot">
        <a href="">去支付</a>
      </div>
    </nav>
  </div>
</body>

</html>